<template>
    <div>
        <div class="tree" style="float:left;width: 100%;">
            <el-row>
                <el-col :span="25" style="overflow: auto;width: 100%;background-color: #ffffff;"
                    :style="{height:heightTree}">
                    <el-tree ref="tree" :props="defaultProps" :load="loadNode" @node-click="itemClick" lazy>
                        <span slot-scope="{ data }" class="custom-tree-node" :title="data.jgjc">
                            <span :dataType="data.jg_leixing">
                                <!-- <i :class="data.icon"/> -->
                                <svg-icon :icon-class="data.icon"></svg-icon>
                                {{ data.jgjc }}
                            </span>
                        </span>
                    </el-tree>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { getOrgTreeLazyHeader, getTreeLeafLazy } from '@/api/datacentersz/organization/organization'
import store from '@/store'

export default {
    name: 'Index',
    components: {
    },
    props: {},
    data () {
        return {
            heightY: window.innerHeight - 280 + 'px',
            heightTree: window.innerHeight - 132 + 'px',
            treeData: [],
            // 选中的树节点
            selectedNode: '',
            filterText: '',
            loading: false,
            flag: '1',
            defaultProps: {
                label: 'jg_mingcheng',
                id: 'jg_id',
                code: 'jg_bianma',
                children: 'children',
                parentId: 'jg_shangji',
                type: 'jg_leixing',
                icon: 'icon',
                shortName: 'jgjc',
                isLeaf: 'leaf'
            },
            node_had: '',
            resolve_had: ''
        }
    },
    computed: {},
    watch: {
        filterText (val) {
            this.$refs.tree.filter(val)
        }
    },
    created () {
    },
    mounted () {
    },
    destroyed () {
    },
    methods: {
        requestNewData () {
            this.node_had.childNodes = [];//把存起来的node的子节点清空，不然会界面会出现重复树！
            this.loadNode(this.node_had, this.resolve_had);//再次执行懒加载的方法
        },
        loadNode (node, resolve) {
            this.loading = true
            const userInfo = JSON.parse(sessionStorage.getItem(`userInfo`)) || {}
            if (node.level === 0) {
                this.node_had = node;//这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
                this.resolve_had = resolve;//同上，把node.level == 0的resolve也存起来
                const personJsons = {
                    'userId': store.getters.user_id.toString(),
                    'token': store.getters.token.toString(),
                    'system': 'officedo',
                    'isEnableEditOrg': userInfo.isEnableEditOrg.toString(),
                    'is_show_org_inside': this.flag,
                    'data': {}
                }
                getOrgTreeLazyHeader(personJsons).then(response => {
                    if (response.result) {
                        return resolve(response.resultdata);
                    } else {
                        this.$message.error(response.message)
                    }
                    this.loading = false
                }).catch(
                    this.loading = false
                )
            }
            if (node.level > 0) {
                const params = {
                    'userId': store.getters.user_id.toString(),
                    'token': store.getters.token.toString(),
                    'system': 'officedo',
                    'isEnableEditOrg': userInfo.isEnableEditOrg.toString(),
                    'is_show_org_inside': this.flag,
                    'data': {},
                    jg_id: node.data.jg_id,
                }
                getTreeLeafLazy(params).then(function (result) {
                    return resolve(result.resultdata);
                })
            }
        },
        itemClick (data) {
            // console.log(data,"dataicon")
            if (data.icon == 'folderopen_svg_128') {
                data.icon = 'folder_svg_128'
            } else if (data.icon == 'folder_svg_128') {
                data.icon = 'folderopen_svg_128'
            }
            const node = {
              label: data.jg_mingcheng || data.label,
              id: data.jg_id || data.id,
              code: data.jg_bianma || data.code,
              children: [],
              parentId: data.jg_shangji || data.parentId,
              type: data.jg_leixing || data.type,
              icon: data.icon,
              shortName: data.jgjc || data.shortName,
            }
            this.selectedNode = node
            this.showData()
        },
        showData () {
            this.$emit('init', this.selectedNode)
        },
        filterNode (value, data) {
            if (!value) return true
            return data.jg_mingcheng.indexOf(value) !== -1
        }
    }
}
</script>

<style scoped>
.el-tree .el-tree-node__expand-icon.expanded {
    transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before {
    content: '\e7a0';
    font-size: 15px;
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: '\e7a2';
    font-size: 15px;
}
.el-tree span {
    font-size: 14px;
}
/deep/ .el-tree .el-tree-node.is-current > .el-tree-node__content {
    background-color: rgb(102, 177, 255);
}
.el-tree {
    /*min-width: 100%;*/
    width: 98%;
    display: inline-block !important;
    margin-top:20px;
}
</style>
